<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">
		<meta content="telephone=no" name="format-detection">
		<meta content="email=no" name="format-detection">
		<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
		<meta http-equiv="Pragma" content="no-cache">
		<meta http-equiv="Expires" content="0">
		<link rel="stylesheet" href="assets/css/explore.css" />
		<script src="assets/js/jquery.min.js"></script>

		<script>
			! function(e, t) {
				function i() {
					var t = n.getBoundingClientRect().width;
					t / m > 540 && (t = 540 * m);
					var i = t / 10;
					n.style.fontSize = i + "px", d.rem = e.rem = i
				}
				var a, r = e.document,
					n = r.documentElement,
					o = r.querySelector('meta[name="viewport"]'),
					l = r.querySelector('meta[name="flexible"]'),
					m = 0,
					s = 0,
					d = t.flexible || (t.flexible = {});
				if(o) {
					console.warn("将根据已有的meta标签来设置缩放比例");
					var p = o.getAttribute("content").match(/initial\-scale=([\d\.]+)/);
					p && (s = parseFloat(p[1]), m = parseInt(1 / s))
				} else if(l) {
					var c = l.getAttribute("content");
					if(c) {
						var u = c.match(/initial\-dpr=([\d\.]+)/),
							f = c.match(/maximum\-dpr=([\d\.]+)/);
						u && (m = parseFloat(u[1]), s = parseFloat((1 / m).toFixed(2))), f && (m = parseFloat(f[1]), s = parseFloat((1 / m).toFixed(2)))
					}
				}
				if(!m && !s) {
					var v = (e.navigator.appVersion.match(/android/gi), e.chrome),
						h = e.navigator.appVersion.match(/iphone/gi),
						x = e.devicePixelRatio;
					m = h || v ? x >= 3 && (!m || m >= 3) ? 3 : x >= 2 && (!m || m >= 2) ? 2 : 1 : 1, s = 1 / m
				}
				if(n.setAttribute("data-dpr", m), !o)
					if(o = r.createElement("meta"), o.setAttribute("name", "viewport"), o.setAttribute("content", "initial-scale=" + s + ", maximum-scale=" + s + ", minimum-scale=" + s + ", user-scalable=no"), n.firstElementChild) n.firstElementChild.appendChild(o);
					else {
						var b = r.createElement("div");
						b.appendChild(o), r.write(b.innerHTML)
					}
				e.addEventListener("resize", function() {
					clearTimeout(a), a = setTimeout(i, 300)
				}, !1), e.addEventListener("pageshow", function(e) {
					e.persisted && (clearTimeout(a), a = setTimeout(i, 300))
				}, !1), "complete" === r.readyState ? r.body.style.fontSize = 12 * m + "px" : r.addEventListener("DOMContentLoaded", function(e) {
					r.body.style.fontSize = 12 * m + "px"
				}, !1), i(), d.dpr = e.dpr = m, d.refreshRem = i, d.rem2px = function(e) {
					var t = parseFloat(e) * this.rem;
					return "string" == typeof e && e.match(/rem$/) && (t += "px"), t
				}, d.px2rem = function(e) {
					var t = parseFloat(e) / this.rem;
					return "string" == typeof e && e.match(/px$/) && (t += "rem"), t
				}
			}(window, window.lib || (window.lib = {}))
		</script>

		<title>发现</title>

		<script src="https://cdn.jsdelivr.net/npm/vue"></script>

		<script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
	</head>

	<body style="font-size: 24px;">
		<div class="container" style="padding-bottom: 0.02rem" id="aa">
			<div class="banner">
				<div class="swiper-container swiper-container-horizontal">
				</div>
			</div>

			<div class="navs">

				<div class="nav-item">
					<a class="icon-item" data-id="1" href="#" @click="getcate(0)">
						<div class="item-wrap">
							<div>
								<img src="http://wechat-1.34580.com/upload/35c59829840375b3.png" class="item-img">
							</div>
						</div>
						<span>吃饭吧</span>
					</a>
				</div>

				<div class="nav-item">
					<a class="icon-item" data-id="1" href="#" @click="getcate(1)">
						<div class="item-wrap">
							<div>
								<img src="http://wechat-1.34580.com/upload/fdd599a3ef80f708.png" class="item-img">
							</div>
						</div>
						<span>小厨房</span>
					</a>
				</div>
				<div class="nav-item">
					<a class="icon-item" data-id="2" href="#" @click="getcate(2)">
						<div class="item-wrap">
							<div>
								<img src="http://wechat-1.34580.com/upload/9a7599a747e3f3fe.png" class="item-img">
							</div>
						</div>
						<span>好物推荐</span>
					</a>
				</div>
				<div class="nav-item">
					<a class="icon-item" data-id="3" href="#" @click="getcate(3)">
						<div class="item-wrap">
							<div>
								<img src="http://wechat-1.34580.com/upload/fe1599a8fe652dee.png" class="item-img">
							</div>
						</div>
						<span>说食话</span>
					</a>
				</div>
			</div>
			<div class="articles">

				<div v-for="(value,index) in Info" class="article-item">
					<a href="javascript:">
						<div class="article-content" @click="showExplore(value.articleId)">
							<img :src="value.pic">
							<div class="article-title ">
								<div class="article-title-footer">
									<div class="article-footer-lf">
										<div class="article-icons like-btn" data-refer-id="121">
											<i class="icon-article-unlike " style="margin-bottom:.1rem"></i>
											<span class="liken-num">{{value.thumb}}</span>
										</div>
										<div class="article-icons ml-10">
											<i class="icon-comments"></i>
											<span class="comments-num">0</span>
										</div>
									</div>
									<div class="article-footer-rg">
										<div class="article-icons">
											<i class="icon-read"></i>
											<span class="read-num">{{value.visit}}</span>
										</div>
									</div>
								</div>
							</div>
							<div class="article-tip has-yellow-bg">{{value.contentTag}}</div>
						</div>
						<div class="article-footer">
							<p @click="showExplore(value.articleId)">{{value.title}}</p>
						</div>
					</a>
				</div>
			</div>
		</div>

		<script>
		/*	console.log("dpr" + window.devicePixelRatio);
			console.log("新宽度" + window.screen.width / 5);
			var html_style = 'font-size:' + window.screen.width / 5 + 'px';
			var dpr = window.devicePixelRatio;

			dpr = dpr >= 3 ? 3 : (dpr >= 2 ? 2 : 1);

			if(dpr == 1) {

				html_style = 'font-size:' + 54 + 'px';
			}

			$("html").attr('data-dpr', dpr);
			$("html").attr('style', html_style);*/

			uuid = "b485bcb2024a11e88308902b340f4796";
			new Vue({
				el: '#aa', //div的id
				data: {
					Info: "", //数据，名称自定
					classstyle: "",
				},
				created: function() { //created方法，页面初始调用    
					var url = "http://api.c-fairy.net:8080/api-restservice/getExploreCatalog?uuid=" + uuid;
					let self = this;
					$.ajax({
						type: "post",
						url: url,
						dataType: "jsonp",
						success: function(data) {
							self.Info = data.data;

						}
					})

				},
				methods: {

					showExplore(articleId) {
						location.href = 'lw-article-fullwidth.html?articleId=' + articleId
					},
					getcate(cate) {
						/*					console.log("cate"+cate);	
						 */
						var url = "http://api.c-fairy.net:8080/api-restservice/getExploreCatalog_byCate?cate=" + cate;
						let self = this;
						$.ajax({
							type: "post",
							url: url,
							dataType: "jsonp",
							success: function(data) {
								self.Info = data.data;

							}
						})

					}

				}
			});
		</script>

	</body>

</html>